<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0604-JS作业2-手风琴轮播图-螺旋</title>
	<style type="text/css">
		html {font-family: "Microsoft YaHei";}
		ul{margin: 0;padding: 0;list-style: none;}
		i {font-style: normal;}
		a {text-decoration: none;}
		body{
			margin: 0;
			background-color: #666;
			cursor: default;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;
		}
		.wrap,.banbox{
			width: 700px;
			height: 280px;
		}
		.wrap{
			margin: 100px auto;
		}
		.banbox li{
			position: relative;
			float: left;
			height: 280px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		.banbox li:nth-child(1){
			background-image: url('images/1.jpg');
		}
		.banbox li:nth-child(2){
			background-image: url('images/2.jpg');
		}
		.banbox li:nth-child(3){
			background-image: url('images/3.jpg');
		}
		.banbox li:nth-child(4){
			background-image: url('images/4.jpg');
		}
		.banbox li:nth-child(5){
			background-image: url('images/5.jpg');
		}
		.banbox li i{
			display: block;
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 4px 16px 0;
			background-color: rgba(0,0,0,.6);
			color: #fff;
			font-size: 16px;
			line-height: 22px;
			text-align: center;
			text-shadow: 0 0 6px #000;
			box-sizing: border-box;
		 }
	</style>
</head>
<body>
	<section class="wrap">
		<ul class="banbox">
			<li style="width: 500px;"><i style="height: 30px;cursor: default;">合金装备V幻痛</i></li>
			<li style="width: 50px;"><i style="height: 280px;cursor: pointer;">全境封锁</i></li>
			<li style="width: 50px;"><i style="height: 280px;cursor: pointer;">光环致远星</i></li>
			<li style="width: 50px;"><i style="height: 280px;cursor: pointer;">暗黑破坏神3</i></li>
			<li style="width: 50px;"><i style="height: 280px;cursor: pointer;">魔兽争霸3冰封王座</i></li>
		</ul>
	</section>
</body>
<script>
	var oBbox = document.getElementsByClassName('banbox')[0],
		oPic = oBbox.getElementsByTagName('li'),
        oPicI,start,ready = true;

	for(var i=0;i<oPic.length;i++){
		(function(i){
            oPicI = oPic[i].getElementsByTagName('i')[0];
            oPic[i].onclick = function(){
                if(ready){
	                fnReady();
	                start = parseFloat(fnGet(oPic[i])['width']);
				    if(start === 50){//如果点击的图片li宽度等于50 则将其增加至500
	                    for(var k=0;k<oPic.length;k++){//同时遍历所有图片li
	                        start = parseFloat(fnGet(oPic[k])['width']);
	                        if(start === 500){//如果图片li宽度等于500 则将其减少至50
	                            oPicI = oPic[k].getElementsByTagName('i')[0];
	                            fnAnim(oPic[k],'width',50,-25);//减少图片层li的宽度
	                            fnAnim(oPicI,'height',280,+10);//增加文字遮盖层i的高度
	                            oPicI.style.cursor = 'pointer';
	                        }
	                    }
	                    oPicI = oPic[i].getElementsByTagName('i')[0];
	                    fnAnim(oPic[i],'width',500,25);//增加图片层li的宽度
	                    fnAnim(oPicI,'height',30,-10);//减少文字遮盖层i的高度
	                    oPicI.style.cursor = 'default';
					    }
                }
            }
		})(i)
	}
	
	//运动框架
	function fnAnim(elem,attr,val,step){
		function fnMod(){
            start = parseFloat(fnGet(elem)[attr]);
            if(start === val){
            }else{
                start += step;
                elem.style[attr] = start + "px";
                requestAnimationFrame(fnMod);
            }
		}
        fnMod();
	}
	
    //通用函数
    function fnGet(elem){//获取标签属性
        return getComputedStyle(elem)||elem.currentStyle;
    }
    function fnReady(){//禁用点击 500毫秒后恢复
        ready = false;
        setTimeout(function (){
            ready = true;
        },500);
    }
</script>
</html>